<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博舆情分析系统-微博可视化</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
       body {
      animation: blink 2s infinite alternate; 
    }

    @keyframes blink {
      0% {
        background-color: pink; 
      }

      100% {
        background-color: skyblue; 
      }
    }

    .content{
        width: 90%;
        max-width: 90%; /* 添加最大宽度以防止在大屏幕上变得过大 */
        height: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
        border-radius: 5px;
        margin-left: 5%;
        margin-top: 20px;
    }
    .guidebar{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        max-width: 100%; /* 添加最大宽度以防止在大屏幕上变得过大 */
        height: 60px;
        background-color: rgb(221, 196, 240);
        box-sizing: border-box;
        border-radius: 5px;
    }

    .time{
        position: relative;
        display: flex;
        justify-content:flex-start;
        flex-direction: row;
        width: 100%;
        max-width: 100%; /* 添加最大宽度以防止在大屏幕上变得过大 */
        height: 50px;
        background-color: rgba(196, 240, 214, 0.863);
        box-sizing: border-box;
        border-radius: 5px;
    }

    .button0{
            margin: 10px 5px 0 5px;
            width: 120px;
            height: 30px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: none;
            color: #6e6e6e;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
    }

    h6{
        margin:15px 10px 10px 125px;
        font-size: 15px;
        color:#6e6e6e;
      }

    .button{
            margin-top: 5px;
            width: 150px;
            height: 50px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: none;
            color: #6e6e6e;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
    }
    .homecontent{
      margin-top: 30px;
    }
    .search{
      display: flex;
      align-items:center;

    }
    .t{
     
            margin-top: 30px;
            margin-left: 60px;
    }
    .searchbutton{
      margin-top: 5px;
      margin-left: 10px;
            width: 50px;
            height: 30px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: none;
            color: #000000;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
    }
    table {
      width: 90%;
      border-collapse: collapse;
      margin-top: 30px;
      margin-left: 10%;
    }

    td {
      border: 1px solid black;
      padding: 10px;
      text-align: left;
    }

    th {
      border: 1px solid black;
      padding: 10px;
      text-align: center;
    }

    .display{
      width: 90%;
      max-height: 100%;
    }

    .text0{
      max-width: 60%;
    }


    </style>
    

</head>

<body>
    <div class="content">

      <div class="time">
        <h6>选择时间范围</h6>
        <input type="date" id="start_time" class="button0">
        <input type="date" id="end_time" class="button0">
        <button onclick="startCrawler()" class="button0">确定</button>
      </div> 

        <div class="guidebar">
            <div>
                <button onclick="homepage()" class="button">首页</button>
                <button onclick="sentimentpage()" class="button">情感分析可视化</button>
                <button onclick="weibopage()" class="button">微博可视化</button>
                <button onclick="Kmeanspage()" class="button">微博KMeans聚类分析</button>
            </div>
            <div>
                <button onclick="exist()" class="button">退出登录</button>
                <button onclick="location.reload()" class="button">刷新</button>
            </div>      

        </div>
        
        <div class="homecontent">
          <div id="app">
            <div class="search">
              <p id="time" class="t"></p>
             <button @click="fetchData" class="searchbutton">显示</button></div>
            </div>

            <div class="display">
              <table id="data-table">
                <thead>
                  <tr>
                    <th id="like">点赞数</th>
                    <th id="text" class="text0">动态文字</th>
                    <th id="date">时间</th>
                    <th id="title">对应话题</th>
                  </tr>
               </thead>
              <tbody>
                
              </tbody>
            </table>
          </div>
            </div>
          </div>


    </div>


    <script>
      function homepage() {
      // 跳转到首页页面的逻辑
      window.location.href ='home.html';
        }
        function sentimentpage() {
      // 跳转到情感分析可视化页面的逻辑
      window.location.href ='sentiment.html';
        }
        function weibopage() {
      // 跳转到微博可视化页面的逻辑
      window.location.href ='weibo.html';
        }
        function Kmeanspage() {
      // 跳转到微博KMeans聚类分析页面的逻辑
      window.location.href ='Kmeans.html';
        }
        function exist() {
      // 跳转到登录页面的逻辑
      window.location.href ='login.html';
        }

        function updateTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();

      // 格式化时间字符串，确保两位数显示
      month = month < 10? '0' + month : month;
      day = day < 10? '0' + day : day;
      hours = hours < 10? '0' + hours : hours;
      minutes = minutes < 10? '0' + minutes : minutes;
      seconds = seconds < 10? '0' + seconds : seconds;

      var timeString = year + '-' + month + '-' + day +' '+ hours + ':' + minutes + ':' + seconds;
      document.getElementById("time").innerHTML = timeString;
    }

    // 每隔 1 秒更新一次时间
    setInterval(updateTime, 1000);
    updateTime(); // 首次加载时立即显示一次时间

//返回表格逻辑
const app = Vue.createApp({
    data() {
        return {
            currentPage: 1,
            totalPages: 1,
            exportedData: []
        };
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            axios.get('http://10.21.249.41:8000/tables/export/', {
                params: {
                    page: this.currentPage
                }
            })
            .then(response => {
              
              const tbody = document.querySelector('#data-table tbody');
        tbody.innerHTML = '';  // 先清空表格的主体部分

        const data = response.data.results;  // 假设获取到的数据在 results 字段中

        data.forEach(item => {
            const row = document.createElement('tr');

            const likeCell = document.createElement('td');
            likeCell.textContent = item.like;  // 假设数据中的点赞数字段名为 like
            row.appendChild(likeCell);

            const textCell = document.createElement('td');
            textCell.textContent = item.text;
            row.appendChild(textCell);

            const dateCell = document.createElement('td');
            dateCell.textContent = item.date;
            row.appendChild(dateCell);

            const titleCell = document.createElement('td');
            titleCell.textContent = item.title;
            row.appendChild(titleCell);

            tbody.appendChild(row);
        });

        this.totalPages = response.data.total_pages;  // 总页数
        console.log('Exported Data:', this.exportedData);
            })
            .catch(error => {
                console.error('Error exporting data:', error);
            });
        }
    }
});

app.mount('#app');


/*fetchData() {
    axios.get('http://10.21.249.41:8000/tables/export/', {
        params: {
            page: this.currentPage,
            columns: this.columnsToExport
        }
    })
  .then(response => {
        const tbody = document.querySelector('#data-table tbody');
        tbody.innerHTML = '';  // 先清空表格的主体部分

        const data = response.data.results;  // 假设获取到的数据在 results 字段中

        data.forEach(item => {
            const row = document.createElement('tr');

            const likeCell = document.createElement('td');
            likeCell.textContent = item.like;  // 假设数据中的点赞数字段名为 like
            row.appendChild(likeCell);

            const textCell = document.createElement('td');
            textCell.textContent = item.text;
            row.appendChild(textCell);

            const dateCell = document.createElement('td');
            dateCell.textContent = item.date;
            row.appendChild(dateCell);

            const topicCell = document.createElement('td');
            topicCell.textContent = item.topic;
            row.appendChild(topicCell);

            tbody.appendChild(row);
        });

        this.totalPages = response.data.total_pages;  // 总页数
        console.log('Exported Data:', this.exportedData);
    })
  .catch(error => {
        console.error('Error exporting data:', error);
    });
}




        /*const app = Vue.createApp({
          data(){
            return{
              columnsToExport:['like','text','date','title'],
              exportedData:[]
            };
          },

          methods:{
            fetchData(){
              axios.get('http://10.21.249.41:8000/tables/export/',{
                params:{
                  columns:this.columnsToExport
                }
              })
              .then(response =>{
                this.exportedData = response.data;
                console.log('Exported Data', this.exportedData);
              })
              .catch(error => {
                console.log('Error exporting data', error);
              });
            }
          }



        });
        app.mount('#app');

        /*function search() {
      const apiUrl = 'https://example.com/api/data';

      axios.get(apiUrl)
 .then(response => {
    const tbody = document.querySelector('#data-table tbody');

    response.data.forEach(item => {
      const row = document.createElement('tr');

      const likesCell = document.createElement('td');
      likesCell.textContent = item.likes;
      row.appendChild(likesCell);

      const textCell = document.createElement('td');
      textCell.textContent = item.text;
      row.appendChild(textCell);

      const timeCell = document.createElement('td');
      timeCell.textContent = item.time;
      row.appendChild(timeCell);

      const themeCell = document.createElement('td');
      themeCell.textContent = item.theme;
      row.appendChild(themeCell);

      tbody.appendChild(row);
    });
  })
 .catch(error => console.error('获取数据出错:', error));
        }*/

        function startCrawler(){
      alert('哈哈，大傻春，被骗了吧。');
    }

    </script>
    
</body>
</html>